<template>
    <div class="cartcontrol"> 
        <transition name="move">
            <div class="iconfont icon-jian" v-show="food.count" @click.stop="updateCount(false)"></div> 
        </transition>
        <div class="cart-count" v-show="food.count">{{food.count}}</div> 
        <div class="iconfont icon-jia" @click.stop="updateCount(true)"></div>
    </div>
</template>
<script>
export default {
    props:{
        food:Object
    },
    methods: {
        updateCount(isAdd){
            this.$store.dispatch('updateCount',{isAdd,food:this.food})
        }
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus"> 

    .cartcontrol 
        font-size: 0 
        .cart-decrease 
            display: inline-block 
            padding: 6px 
            line-height: 24px 
            font-size: 24px 
            color: rgb(0, 160, 220) 
        .icon-jian
            display: inline-block 
            padding 6px 
            line-height 24px 
            font-size 24px 
            color #41B883
            &.move-enter-active,&.move-leave-active
                transition all .5s
            &.move-enter,&.move-leave-to
                opacity 0
                transition translateX(0.8rem) rotate(180deg)
        .cart-count
            display: inline-block
            vertical-align: top
            width: 12px 
            padding-top: 6px 
            line-height: 24px 
            text-align: center
            font-size: 10px 
            color: rgb(147, 153, 159) 
        .icon-jia 
            display: inline-block 
            padding: 6px 
            line-height: 24px 
            font-size: 24px 
            color #41B883 
</style>

